<template>
	<view class="all">
		<view class="search">
			<u-search placeholder="请输入基金名称或代码" :animation="true" :show-action="false" @search="search1"
				v-model="value"></u-search>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#00d5c7"
			bar-width="80" v-if="!searchPerformed"></u-tabs>
		<!-- 内容部分 -->
		<view class="conet" v-for="(item,index) in arr" :key="index" v-if="!searchPerformed">
			<view class="num">{{item.id}}</view>
			<view class="content-right">
				<view class="percent">
					<text>{{item.name}}</text>
					<text>{{item.percent}}</text>
				</view>
				<view class="finance">
					<text>{{item.mark}} | {{item.product}}</text>
					<text>{{item.criterion}}</text>
				</view>
				<view class="moods">
					<text>{{item.moods}}</text>
					<text>{{item.serial}}</text>
				</view>
			</view>
		</view>
		<!-- 搜索完成后的内容 -->
		<view class="seek" v-if="searchPerformed">
			<view class="product">产品</view>
			<view class="box" v-for="(item,index) in arr1" :key="index">
				<view class="box-one">
					<view class="box-top">
						<text>{{item.percent}}</text>
						<text>{{item.name}}</text>
					</view>
					<view class="box-bottom">
						<text>近一年收益率</text>
						<text>164701 | 股票型</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		search
	} from "../../API/foodShop.js"
	export default {
		data() {
			return {
				list: [{
					name: '热搜榜'
				}, {
					name: '产品榜'
				}, {
					name: '生活榜'
				}],
				current: 1,
				value: "",
				arr: [],
				searchPerformed: false,
				arr1: []
			}
		},
		methods: {
			// 产品分类
			change(index) {
				this.current = index;
			},
			// 搜索框
			search1() {
				uni.request({
					url: "http://172.16.105.51:8000/searchr",
					method: "POST",
					data: {
						keyword: this.value
					},
					header: {
						"Content-Type": "application/json",
					},
					success: (res) => {
						console.log(res.data);
						this.arr1 = res.data
						// 在接收到搜索结果后将 searchPerformed 设置为 true
						this.searchPerformed = true;
					}, // 假设结果的建为"serve'
					fail: (error) => {
						console.error("Error:", error)
					},
				})
			},
			// 搜索下面的内容
			fun() {
				search().then((res) => {
					// console.log(res.data);
					this.arr = res.data.data;
					// 在获取初始内容时重置 searchPerformed 为 false
					this.searchPerformed = false;
				}).catch((Error) => {
					console.log(Error);
				})
			},
			onShow() {
				this.fun()
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 90%;
		margin-left: 40rpx;
		margin-top: 30rpx;
	}

	/* 内容部分 */
	.conet {
		display: flex;
		justify-content: space-evenly;
		height: 200rpx;
		background-color: white;
		margin-top: 15rpx;
	}

	.num {
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}

	.content-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 600rpx;
		color: #676767;
	}

	.percent,
	.finance {
		width: 100%;
		display: flex;
		justify-content: space-between
	}

	.percent text:nth-child(1) {
		font-size: 34rpx;
		font-weight: 600;
	}

	.percent text:nth-child(2) {
		color: red;
		font-weight: 600;
		font-size: 34rpx;
	}

	.moods text:nth-child(2) {
		margin-left: 30rpx;
	}

	/* 搜索后的内容 */
	.seek {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
	}

	.product {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.box {
		background-color: white;
		box-shadow: 0rpx 0rpx 10rpx #0000001f;
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		padding: 40rpx 20rpx;
	}

	.box-top,
	.box-bottom {
		display: flex;
		padding: 10rpx 0rpx;

	}

	.box-top text:nth-child(1) {
		color: red;
		font-size: 36rpx;
		font-weight: 600;
	}

	.box-top text:nth-child(2) {
		font-size: 36rpx;
		margin-left: 110rpx;
		/* 省略号 */
		width: 300rpx;
		white-space: nowrap;
		/* 修正属性名为 nowrap */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 修正属性名为 ellipsis */
		max-width: 300rpx;
		/* 添加最大宽度 */
	}

	.box-bottom text:nth-child(2) {
		margin-left: 70rpx;
	}
</style>